<template>
    <div class="portal-detail-container"
         :class="{
             'empty-content': !!!content
         }"
         v-loading="loading"
         element-loading-text="数据加载中, 请稍后..."
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.1)">
        <!--<h3 class="page-title"> 角色管理 <small></small></h3>-->
        <div class=""><!-- padding-10 ovh-imp search-form -->
            <div class="form">
                <div class="row">
                    <div class="col-sm-6">
                        <el-button size="mini" type="primary" class="mbtn"
                                   @click="showCreateWin()"> + 新增 </el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-wrapper">
            <el-table
                :data="list"
                border
                size="mini"
                style="width: 100%">
                <el-table-column
                    prop="page_name"
                    label="页面名"
                    width="200">
                    <template slot-scope="scope">
                        {{ scope.row.page_name }}
                    </template>
                </el-table-column>
                <!--<el-table-column
                    label="创建人">
                    <template slot-scope="scope">
                        {{ scope.row.admin ? scope.row.admin.nickname : '' }}
                    </template>
                </el-table-column>-->
                <el-table-column
                    prop="url"
                    label="页面路径"
                    width="240">
                </el-table-column>

                <el-table-column
                    prop="items"
                    label="页面数据">
                    <template slot-scope="scope">
                        <el-tag v-for="it in scope.row.items"
                                size="small"
                                style="margin-right: 5px;margin-top:3px;margin-bottom:3px;"
                                :disable-transitions="false">
                            {{it.content.content_name}}({{it.alias || it.content.content_code}})
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="220" align="center">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleView(scope.row, scope.$index)">详情</el-button>

                        <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.row, scope.$index)">编辑</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleData(scope.row, scope.$index)">页面数据</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleDelete(scope.row, scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--<el-pagination
            @size-change="refresh"
            @current-change="refresh"
            :current-page.sync="pagination.current"
            :page-sizes="[10, 20, 50, 100]"
            :page-size.sync="pagination.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="pagination.total">
        </el-pagination>-->

        <el-dialog :title="winName" :visible.sync="showCreate" top="30px" width="600px"
                   :close-on-click-modal="false" :append-to-body="true">
            <c-create @close="closeWin" :mod-id.sync="modId" :view="showView" :show.sync="showCreate"></c-create>
        </el-dialog>
        <el-dialog :title="associateWinName" :visible.sync="showAssociate" top="60px"
                   :close-on-click-modal="false" :append-to-body="true">
            <c-associate @close="closeWin" :rid.sync="rid" :show.sync="showAssociate"></c-associate>
        </el-dialog>

        <!--<el-dialog title="查看" :visible.sync="showView" top="60px" :append-to-body="true">
            <c-view @close="closeWin" :rid.sync="rid" :show.sync="showView"></c-view>
        </el-dialog>-->
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    import axios from 'axios';
    import _ from 'lodash';
    import cCreate from './create';
    import cAssociate from './associate';
    import cView from './view';

    export default {
        data() {
            return {
                showCreate: false,
                modId: null,
                formLabelWidth: '160px',
                winName: '新增',
                list: [],
                loading: false,
                pagination: {
                    current: 1,
                    pageSize: 10,
                    total: 0
                },

                rid: null,
                showAssociate: false,
                associateWinName: '',

                showView: false,

                form: {
                    page_name: '',
                    url: '',
                    type: 'WEB',
                    view: '',
                },
            }
        },
        components: {
            cCreate,
            cAssociate,
            cView
        },
        created: function () {
            // this.pid = this.$route.query.pid;
        },
        mounted: function () {
            // this.groupId = this.$route.params.groupId;
            // this.init();
            this.refresh();
        },
        watch: {
            '$route' (to, from) {
                // this.groupId = this.$route.params.groupId;
                // this.refresh();
            }
        },
        computed: mapState([

        ]),
        methods: {
            ...mapActions([
            ]),
            init() {

            },
            refresh() {
                axios.get('/mgr/api/page/web/list')
                    .then(({ data }) => {
                        this.list = data;
                    })
            },
            closeWin(flag){

                this.showCreate = false;
                this.showAssociate = false;
                this.showView = false;
                // if(flag) {
                    this.refresh();
                // }
            },
            showCreateWin() {
                this.showCreate = true;
                this.showView = false;
                this.modId = null;
                this.winName = '新增页面';
                this.$refs.mform && this.$refs.mform.resetFields();
                this.form = {
                    page_name: '',
                    url: '',
                    type: 'WEB',
                    page_desc: '',
                    view: '',
                };
            },
            handleView(it) {
                // this.rid = it.page_id;
                this.modId = it.page_id;
                this.showAssociate = false;
                this.showCreate = true;
                this.showView = true;
            },
            handleEdit(it) {
                this.modId = it.page_id;
                this.showCreate = true;
                this.showView = false;
            },
            _delete(id, type) {
                axios.post(`/mgr/api/page/web/remove`, {
                    page_id: id
                }).then(({ data }) => {
                    this.refresh();
                }).catch((error) => {
                    this.$alert('操作失败，请稍后再试！');
                })
            },
            handleDelete(it) {

                if(!it || !it.page_id) {
                    return;
                }
                this.$confirm(`此操作将永久删除该页面【${it.page_name}】, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this._delete(it.page_id, 'remove');
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleData(row, idx) {
                this.showAssociate = true;
                this.showCreate = false;
                this.showView = false;
                this.rid = row.page_id;
                this.associateWinName = `【${row.page_name}】关联的内容`;
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>
